Estoy buscando formatear la entrada de un campo de texto mientras el usuario está escribiendo. El tipo de formato tiene que ser mil separación por "." como esto:
Usuario escribe: 1000
El campo debe mostrar: 1.000
Me las arreglé para armar esto a pesar de mi conocimiento js relativamente limitado, pero no se formateará de la manera prevista. A menos que el número de entrada tenga cinco dígitos (por ejemplo, 10000 se muestra correctamente como 10.000), no funcionará. Los números de cuatro dígitos todavía se muestran sin el "." separador
http://jsfiddle.net/zt4kjrdf/1/
Intenté cambiar el tipo de entrada a número en el html también, pero fue en vano.
¿Podría alguien guiarme en la dirección correcta aquí?
Gracias.
$("#field-to-format").keyup(function() { if ($("#field-to-format").val().length == 5) { var my_val = $("#field-to-format").val(); $("#field-to-format").val(Number(my_val).toLocaleString('da')); } }); #field-to-format { font-size: 28px; text-align: center; position: absolute; top: 20px; left: 20px; height: 36px; width: 130px; border: 2px solid #000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="field-1"> <div class="input"> <div class="input-wrap"> <input type="text" id="field-to-format" maxlength="5"> </div> </div> </div>Puede usar una expresión regular simple.
function numberWithDots(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); }La expresión regular utiliza 2 aserciones anticipadas:
Solución complicada Podrías hacer algo como esto:
$("#field-to-format").keyup(function($("#field-to-format")) { return $("#field-to-format").toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, "."); }Soluciones ya implementadas
Use Number.prototype.toLocaleString que se implementa en JavaScript
var my_val = $("#field-to-format").val(); console.log(my_val.toLocaleString());O si no quieres una cadena sino un número, puedes hacer esto:
var my_val = $("#field-to-format").val(); let new_number = new Intl.NumberFormat('en-US'); new_number.format(my_val);Solución fácil
Si simplemente elimina el bucle if ( if ($("#field-to-format").val().length == 5) { )
en su fragmento, simplemente copie y pegue esto sobre su código:
$("#field-to-format").keyup(function() { var my_val = $("#field-to-format").val(); $("#field-to-format").val(Number(my_val).toLocaleString('da')); });Funcionará por 1.000 tal como está y como quisiera, pero luego también habilitará una entrada más grande: D
EDITAR
Dado que el autor de la publicación quería más explicaciones:
En primer lugar, eso se debe a que está activado, por lo que se activa muy a menudo, cambiando así 1.000 a 1.000 decimal. En segundo lugar, no supera los 5 dígitos ya que lo tiene limitado en la entrada de texto, así que elimínelo y luego puede probar cualquiera de estos 2 códigos (js):
$("#field-to-format").change(function() { var my_val = $("#field-to-format").val(); $("#field-to-format").val(Number(my_val).toLocaleString('da')); }); $("#field-to-format").change(function() { var my_val = $("#field-to-format").val(); $("#field-to-format").val(String(my_val).replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")); });y en html cambiarlo a esto:
<div class="field-1"> <div class="input"> <div class="input-wrap"> <input type="Text" id="field-to-format"> </div> </div> </div>